<template>
	<div class="kanban-main-warp animated" style="display:block;">
		<div class="kanban-main-container content" style="right:45px">
			<div class="kanbanCard-main-container">
				<div class="cardList-container-warp">
					<template>
						<ul class="cardList-container ui-sortable second-type-container" v-if="todayShowType==1">
							<li class="kanban-card-container list-today animated" data-card-id="today" v-for="(item1,index1) in fourQuadrantList" :key="item1.id" @mouseover="setSwitchhover(index1,1)" @mouseout="setSwitchhover(index1,0)">
								<div class="kanban-card-container">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr">
												<div class="header not-active" style="display: block;">
													<div class="attr"><span>{{item1.value}}</span></div>
												</div>
												<div class="card-rename">
													<input type="text" v-model="addCardItemTitle" placeholder="标题">
													<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithQuadrant(item1.key)">保存</span>
													<div style="clear: both"></div>
												</div>
												<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>

												<el-tooltip
												v-if="index1==0 && switchhover"
												:content="lifevisible?'关闭生活任务':'开启生活任务'" placement="top">
												<el-switch
													class="switch"
													v-model="lifevisible"
													active-color="#13ce66"
													inactive-color="#ff4949">
												</el-switch>
												</el-tooltip>



											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
															<draggable class="dragArea today-task-list" :list="item1.list" tagKey="due" :anotherKey1="item1.key" anotherValue1='' :tagVal="daySelect" :options="{group:'task'}" @add="dragAdd"
															@start="dragStart()" @end="resortByGroup">
																<li class="kanban-Item-container animated tooltipstered"
																	:class="[selectedTaskId==item2.id?'active':'',item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state)]"
																	v-for="(item2,index2) in item1.list"
																	:key="item2.id"
																	:id="item2.id"
																	tabindex="1"
																	:taskId="item2.id" draggable="false"
																	@dblclick="showDetail(item2.id)"
																	@click="changeSelectedTask(item2)"
																	@keyup.ctrl.up="up(index2,fourQuadrantList[index1].list)"
																	@keyup.ctrl.down="down(index2,fourQuadrantList[index1].list)">

																	<el-popover
																		placement="right"
																		width="500"
																		trigger="hover"
																		:open-delay='500'
                                    @show="loadPic(index2,item2)"
                                  >
																		<div style="text-align: center; margin:0">
																		<div v-html="templateData"></div>
																		</div>
																		<div slot="reference">
																		<div class="left">
																			<el-checkbox v-model="item2.finished" @change="changeTaskStatusBox(item2)"></el-checkbox>
																		</div>
																		<div class="right">
																			<div class="portrait-container">
																			<img class="portrait" :src="item2.mhead" v-if="item2.mhead" draggable="false">
																			</div>
																			<div class="row1">
																			<span class="kanban-item-title">{{(index2+1)+'.' +item2.title}}</span>
																			<div class="receive-btn" style="display: none;">领取</div>
																			</div>
																			<div class="dateNode node"></div>
																		</div>
																		</div>
																	</el-popover>

																</li>
															</draggable>
														</ul>
													</div>
													<div class="no-task-container" v-show="item1.allNum==0">
														<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
														<p>点击创建新任务</p>
														<p>或使用+号创建新任务</p>
													</div>
												</div>
											</div>
										</div>
										<div class="footer">
											<!--今日三种模式点击-->
											<div class="three-type-contaienr" v-if="item1.key=='critical'">
												<span @click="changeTodayShowType(1)" :class="todayShowType==1?'active':''">1</span>
												<span @click="changeTodayShowType(2)" :class="todayShowType==2?'active':''">2</span>
												<span @click="changeTodayShowType(3)" :class="todayShowType==3?'active':''">3</span>
											</div>
											<div class="bottom" style="display:block">
												任务 {{item1.finishedNum}} / {{item1.allNum}} 评估:{{item1.needLeft}}
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<ul class="cardList-container ui-sortable third-type-container" v-if="todayShowType==3" style="width: 536px;">
							<li class="kanban-card-container list-today animated" data-card-id="today" v-for="(item1,index1) in fourQuadrantList"  @mouseover="setSwitchhover(index1,1)" @mouseout="setSwitchhover(index1,0)">
								<div class="kanban-card-container">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr">
												<div class="header not-active" style="display: block;">
													<div class="attr"><span>{{item1.value}}</span></div>
												</div>
												<div class="card-rename">
													<input type="text" v-model="addCardItemTitle" placeholder="标题">
													<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithQuadrant(item1.key)">保存</span>
													<div style="clear: both"></div>
												</div>
												<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>

												<el-tooltip
												v-if="index1==0 && switchhover"
												:content="lifevisible?'关闭生活任务':'开启生活任务'" placement="top">
												<el-switch
													class="switch"
													v-model="lifevisible"
													active-color="#13ce66"
													inactive-color="#ff4949">
												</el-switch>
												</el-tooltip>

											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
															<draggable class="dragArea today-task-list" :list="item1.list" tagKey="due" :tagVal="daySelect" :anotherKey1="item1.key" anotherValue1='' :options="{group:'task'}" @start="dragStart()" @add="dragAdd" @end="resortByGroup">
																<li class="kanban-Item-container animated tooltipstered"
																	:class="[selectedTaskId==item2.id?'active':'',item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state)]"
																	 v-for="(item2,index2) in item1.list"
																	 :taskId="item2.id"
																	 :key="item2.id"
																	 :id="item2.id"
																	 tabindex="1"
																	 draggable="false"
																	 @dblclick="showDetail(item2.id)"
																	 @click="changeSelectedTask(item2)"
																	 @keyup.alt.up="up(index2,fourQuadrantList[index1].list)"
																     @keyup.alt.down="down(index2,fourQuadrantList[index1].list)">
																	<!--<div class="time-dot" :class="item.tags.due&&item.tags.due.split(' ')[1]?'orange':''" @click="timeDotDialogVisible=true">
																		{{item.timeDot}}
																	</div>-->
																	<div class="left">
																		<el-checkbox v-model="item2.finished" @change="changeTaskStatusBox(item2)"></el-checkbox>
																	</div>
																	<div class="right">
																		<div class="portrait-container">
																			<img class="portrait" :src="item2.mhead" v-if="item2.mhead" draggable="false">
																		</div>
																		<div class="row1">
																			<span v-bind:title="item2.title+'\n'+item2.desc" class="kanban-item-title">
																				{{(index2+1)+'.'+item2.title}}
																			</span>
																			<div class="receive-btn" style="display: none;">领取</div>
																		</div>
																		<div class="dateNode node"></div>
																	</div>
																</li>
															</draggable>
														</ul>
													</div>
													<!--<div class="no-task-container" v-show="taskAcount.all==0">
														<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
														<p>点击创建新任务</p>
														<p>或使用+号创建新任务</p>
													</div>-->
												</div>
											</div>
										</div>
										<div class="footer">
											<!--今日三种模式点击-->
											<div class="three-type-contaienr" v-if="item1.key=='low'">
												<span @click="changeTodayShowType(1)" :class="todayShowType==1?'active':''">1</span>
												<span @click="changeTodayShowType(2)" :class="todayShowType==2?'active':''">2</span>
												<span @click="changeTodayShowType(3)" :class="todayShowType==3?'active':''">3</span>
											</div>
											<div class="bottom" style="display:block">
												任务 {{item1.finishedNum}} / {{item1.allNum}}
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>

						<!--今日内容-->
						<ul class="cardList-container ui-sortable first-type-container">
							<li class="kanban-card-container list-today animated" data-card-id="today" v-if="todayShowType==2" @mouseover="setSwitchhover(0,1)" @mouseout="setSwitchhover(0,0)">
								<div class="kanban-card-container">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr">
												<div class="header not-active" style="display: block;">
													<div class="attr"><span>今日任务（{{daySelect?daySelect.slice(5,10):''}}）</span></div>
												</div>
												<div class="card-rename">
													<input type="text" v-model="addCardItemTitle" placeholder="标题">
													<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithDue({'due':daySelect})">保存</span>
													<div style="clear: both"></div>
												</div>
												<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>

												<el-tooltip
												v-if="switchhover"
												:content="lifevisible?'关闭生活任务':'开启生活任务'" placement="top">
												<el-switch
													class="switch"
													v-model="lifevisible"
													active-color="#13ce66"
													inactive-color="#ff4949">
												</el-switch>
												</el-tooltip>

											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
															<draggable class="dragArea today-task-list" :list="todayArr" tagKey="due" :tagVal="daySelect" :options="{group:'task'}" @add="dragAdd" @start="dragStart()" @end="saveSort(1)"><!---->
																<li class="kanban-Item-container animated tooltipstered"
																	:class="[selectedTaskId==item.id?'active':'',item['tags']&&item['tags']['need']?'has-need':'',taskStatusClass(item.state),...checkLevel(item.tags)]"
																	v-for="(item,index) in todayArrFilter"
																	:key="item.id"
																	:id="item.id"
																	:data-index="index"
																	tabindex="1"
																	:taskId="item.id" draggable="false"
																	@dblclick="showDetail(item.id)"
																	@click="changeSelectedTask(item)"
																	@keyup.alt.up="up(index,todayArr)"
                                    								@keyup.alt.down="down(index,todayArr)"
                                    								@keydown.shift="upTask($event)"
																	>
																	<div class="time-dot" :class="item.tags.due&&item.tags.due.split(' ')[1]?'orange':''" @click="timeDotDialogVisible=true">
																		{{item.timeDot}}
																	</div>
																	<div class="left">
																		<el-checkbox v-model="item.finished" @change="changeTaskStatusBox(item)"></el-checkbox>
																	</div>
																	<div class="right">
																		<div class="portrait-container">
																			<img class="portrait" :src="item.mhead" v-if="item.mhead" draggable="false">
																		</div>
																		<div class="row1"><span v-bind:title="item.title+'\n'+item.desc" class="kanban-item-title">{{(index+1)+'.'+item.title}}</span>
																			<div class="receive-btn" style="display: none;">领取</div>
																		</div>
																		<div class="dateNode node"></div>
																	</div>
																</li>
															</draggable>
														</ul>
													</div>
													<div class="no-task-container" v-show="taskAcount.all==0">
														<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
														<p>点击创建新任务</p>
														<p>或使用+号创建新任务</p>
													</div>
												</div>
											</div>
										</div>
										<div class="footer">
											<!--今日三种模式点击-->
											<div class="three-type-contaienr">
												<span @click="changeTodayShowType(1)" :class="todayShowType==1?'active':''">1</span>
												<span @click="changeTodayShowType(2)" :class="todayShowType==2?'active':''">2</span>
												<span @click="changeTodayShowType(3)" :class="todayShowType==3?'active':''">3</span>
											</div>
											<div class="bottom footerRight" style="display:block">
												任务 {{taskAcount.finish}} / {{taskAcount.all}} 评估:{{needTotal}} 耗时:{{usedStr}}
											</div>
										</div>
									</div>
								</div>
							</li>
							<li class="kanban-card-container list-today animated" data-card-id="today" v-if="lifevisible">
								<div class="kanban-card-container">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr">
												<div class="header not-active" style="display: block;">
													<div class="attr"><span>{{lifeItem.value}}</span></div>
												</div>
												<div class="card-rename">
													<input type="text" v-model="addCardItemTitle" placeholder="标题">
													<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithQuadrant(lifeItem.key)">保存</span>
													<div style="clear: both"></div>
												</div>
												<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>

											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
															<draggable class="dragArea today-task-list" :list="lifeItem.list" tagKey="due" :anotherKey1="lifeItem.key" anotherValue1='' :tagVal="daySelect" :options="{group:'task'}" @add="dragAdd" @start="dragStart()" @end="resortByGroup">
																<li class="kanban-Item-container animated tooltipstered"
																	:class="[selectedTaskId==item2.id?'active':'',item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state)]"
																	v-for="(item2,index2) in lifeItem.list"
																	:key="item2.id"
																	:id="item2.id"
																	tabindex="1"
																	:taskId="item2.id" draggable="false"
																	@dblclick="showDetail(item2.id)"
																	@click="changeSelectedTask(item2)"
																	@keyup.ctrl.up="up(index2,fourQuadrantList[index1].list)"
																	@keyup.ctrl.down="down(index2,fourQuadrantList[index1].list)">

																	<el-popover
																		placement="right"
																		width="500"
																		trigger="hover"
																		:open-delay='500'
                                    @show="loadPic(index2,item2)"
                                  >
																		<div style="text-align: center; margin:0">
																		<div v-html="templateData"></div>
																		</div>
																		<div slot="reference">
																		<div class="left">
																			<el-checkbox v-model="item2.finished" @change="changeTaskStatusBox(item2)"></el-checkbox>
																		</div>
																		<div class="right">
																			<div class="portrait-container">
																			<img class="portrait" :src="item2.mhead" v-if="item2.mhead" draggable="false">
																			</div>
																			<div class="row1">
																			<span class="kanban-item-title">{{(index2+1)+'.' +item2.title}}</span>
																			<div class="receive-btn" style="display: none;">领取</div>
																			</div>
																			<div class="dateNode node"></div>
																		</div>
																		</div>
																	</el-popover>

																</li>
															</draggable>
														</ul>
													</div>
													<div class="no-task-container" v-show="lifeItem.allNum==0">
														<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
														<p>点击创建新任务</p>
														<p>或使用+号创建新任务</p>
													</div>
												</div>
											</div>
										</div>
										<div class="footer">
											<div class="bottom" style="display:block">
												任务 {{lifeItem.finishedNum}} / {{lifeItem.allNum}}
											</div>
										</div>
									</div>
								</div>
							</li>
							<draggable id="tagTmpList" class="dragArea" :options="{animation: 300,}" @end="tagColumnDragEnd()" style="display: inline-block;height: 100%;" v-if="todayShowType!=1">
								<li class="kanban-card-container edit-need animated" v-if="item1.pid == null" v-for="(item1,index1) in tagTmpList" :tagKey="item1.key" :data-card-id="item1.id" style="width: 130px;">
									<div class="kanban-card-container" style="width: 130px;">
										<div class="kanban-card-warp">
											<div class="card-table">
												<div class="head-tr triangle-badge-lt" :data-quickNo="quickNoStr[index1]">
													<div class="header" style="display: block;">
														<div class="attr"><span>{{item1.name}}</span></div>
													</div>
													<div class="card-rename" style="display: none;"><input type="text" v-model="addCardItemTitle" placeholder="标题" style="width: calc(100% - 34px);"><span class="btn btn-primary save pull-right" style="padding: 6px 2px;" @click="addTagTmp(item1)" v-loading="addCardItemLoading">保存</span>
														<div style="clear: both"></div>
													</div>
													<i class="icon-add_circle addItem" :class="item1.key=='other'||item1.key=='dev'?'is-show-dialog':''" @click="showTmpDialog(item1)" style="display: inline;top: 12px;" v-show="cantEditTags.indexOf(item1.key)<0"></i>
													<i class="delete-tags-btn" v-show="cantDeleteTags.indexOf(item1.key)<0" @click="delTagTmp(item1)"></i>
												</div>
												<div class="body-tr">
													<div class="body-tr-container">
														<div class="kanban-item-warp">
															<ul class="kanban-item-list">
																<div class="itemTop"></div>
																<div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
																	<ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
																	<div style="clear: both"></div>
																</div>
																<ul class="list-ul doing ui-sortable" style="min-height: 38px;width: 100%">
																	<draggable class="dragArea today-task-list" :options="{group:'task'+index1,animation: 300}">
																		<li style="width:auto" class="kanban-Item-container need-1 animated tooltipstered " :tagKey="item2.key" :value="item2.value" :data-quickNo="index2" v-for="(item2,index2) in item1.list" v-bind:proId="item2.key">
																			<div class="left">
																				<el-checkbox @change="changeTaskTag(item2.key,item2.value,item2.checked,item1.key)" v-model="item2.checked"></el-checkbox>
																			</div>
																			<div class="right">
																				<div class="row1" style="width:auto">
																					<span class="kanban-item-title">{{ item2.key == "to" ? item2.name:(item2.key == "repeat"?item2.name:(item2.value || item2.name))}}</span>
																					<span class="el-icon-circle-close" @click="updateTagTmp(item1,item2.key,item2.value)" v-show="cantEditTags.indexOf(item1.key)<0"></span>
																				</div>
																			</div>
																			<div style="clear: both"></div>
																		</li>
																	</draggable>
																</ul>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<!--<div class="kanban-item-warp"><ul class="kanban-item-list"><li class="top"></li><li class="itemTop"></li><li class="bottom"><ul class="bottomAdd"><li><i class="icon-add"></i></li><li><span></span></li></ul></li></ul></div>-->
											<div class="footer">
												<div class="bottom">
													<ul class="bottomAdd" style="display: block;">
														<li></li>
														<li><span>-</span></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</li>
							</draggable>
						</ul>
						<div class="addCard" style=" height: 100%;width: 80px;" @click="addColumn()" v-if="todayShowType!=1">
							<ul class="addCard-ul" style="position:relative;top: 50%;margin-top: -35px;">
								<li><i class="icon-add_circle addItem"></i></li>
								<li><span>新建</span></li>
							</ul>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="kanban-main-container" id="taskeditor" style="position:absolute" @keydown.esc="escEditor()" tabindex="1">
		</div>
		<!--选择时间点-->
		<el-dialog title="选择时间" :visible.sync="timeDotDialogVisible" size="tiny">
			<el-time-select style="margin:0 auto;" v-model="selectTimeDot" :picker-options="{
		    start: '09:00',
		    step: '00:15',
		    end: '24:00'
		  }" placeholder="选择时间"></el-time-select>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="timeDotDialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary"  size="small" @click="setTimeDot()">确 定</el-button>
		  </span>
		</el-dialog>
		<div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()" >
			<!--<task-detail ref="showTaskDetail"></task-detail>-->
			<task-detail ref="taskDetailComponent"></task-detail>
		</div>
		<date-line></date-line>
		<tmp-dialog ref="tmpDialog"></tmp-dialog>
		<!--v-on:saveTmp="saveTmp"-->
	</div>

</template>

<script>//	import ms from 'ms'
import draggable from 'vuedraggable'
import pinyin from '../../../static/z39pc/js/pinyin.js'
import _ from "underscore";
import moment from "moment";
import dateLine from '../../components/task/dateLine.vue'
import tmpDialog from '../../components/task/tmpDialog.vue'
import taskDetail from '../../components/task/taskDetail.vue'
import api from '../../api';
import { taskAndTag } from "../../common/mixin";
import { mixinPc } from "../../common/mixinPc";
import {mixinEditor} from "../../common/mixinEditor";
import { bus } from "../../common/bus";
import {
	mapState,
	mapActions
} from 'vuex';

var initPage = function() {

}
export default {
	components: {
		'task-detail': taskDetail,
		'date-line': dateLine,
		'tmp-dialog': tmpDialog,
		draggable
		//'task-detail':require('../../components/taskDetail.vue'),
	},
	data() {
		return {
			// todayTags: [],
      templateData:'',
			timeDotDialogVisible: false,
			selectTimeDot: '',
			selectedTaskId: '',
			dragItemData: '',
			quickNoStr: "QWERTYUIOP",
			showTimeNeed: false,
			showPopupPicker: false,
			showSummary: false,
			taskCurr: {
				title: ""
			},
			taskDoing: null,
			sortStr: "",
			todayArr: [],
			visibility: false,
			showMonth: '',

			stateAdd: false,
			taskTitle: "",
			taskDesc: "",
			smyTitle: "",
			smydesc: "",
			smydesc1: "",
			smydesc2: "",
			smydesc3: "",
			smydesc4: "",
			smydesc5: "",
			showAddTag: false,

			tagTmpList: [],
			taskAcount: {
				all: 0,
				finish: 0
			},
			fourQuadrantList: [],
			fourQuadrantTagsArr: ['critical', 'high', 'low', 'minor'],
			todayShowType: localStorage.getItem('todayModelType')||1,
			tagsRepeatList: [{
				name: "每天",
				key: "repeat",
				active: false,
				value: 'D'
			}, {
				name: "每周1",
				key: "repeat",
				active: false,
				value: 'W1'
			}, {
				name: "每周2",
				key: "repeat",
				active: false,
				value: 'W2'
			}, {
				name: "每周3",
				key: "repeat",
				active: false,
				value: 'W3'
			}, {
				name: "每周4",
				key: "repeat",
				active: false,
				value: 'W4'
			}, {
				name: "每周5",
				key: "repeat",
				active: false,
				value: 'W5'
			}, {
				name: "每周6",
				key: "repeat",
				active: false,
				value: 'W6'
			}, {
				name: "每周日",
				key: "repeat",
				active: false,
				value: 'W7'
			}, {
				name: "每月",
				key: "repeat",
				active: false,
				value: 'M'
			}, {
				name: "每年",
				key: "repeat",
				active: false,
				value: 'Y'
			}],
			tagsRepeatDic: {},
			cantEditTags: ['to', 'project', 'repeat', 'area4', 'recent'],
			cantDeleteTags: ['dev','need','other','to', 'project', 'repeat', 'area4', 'recent'],
			usedStr:'',
			needTotal:"",
			switchhover : false,
			lifevisible : localStorage.getItem('lifevisible')?(localStorage.getItem('lifevisible')=='true'):false,
			lifeItem: {},
			//过滤后的今日任务列表
			todayArrFilter:[],
			// 当前今日任务的选择索引
			curIndex: undefined
		};
	},
	mixins: [taskAndTag, mixinPc, mixinEditor],
	computed: {
		...mapState({
			uid: state => state.vux.uid,
			minDate: state => state.z39.minDate,
			maxDate: state => state.z39.maxDate,
			taskAll: state => state.z39.taskAll,
			sortdayDic: state => state.z39.sortdayDic,
			tagDic: state => state.z39.tagDic,
			taskDic: state => state.z39.taskDic,
			tagitems: state => state.z39.tagitems,
			tagitemDic: state => state.z39.tagitemDic,
			days: state => state.z39.days,
			projects: state => state.z39.projects,
			members: state => state.z39.members,
			todayTags: state => state.z39.tagtmps,
			memberDic: state => state.z39.memberDic,
			daySelect: state => state.z39.selectedDayDate,
			filterTaskState: state =>state.z39.filterTaskState,
		})
	},
	watch: {
		"taskAll": {
			handler() {
				this.$parent.nones;
				this.resort();
			},
			deep: true,
		},
		"daySelect": function() {
			this.resort();
		},
		"lifevisible": function(){
			localStorage.setItem('lifevisible', this.lifevisible);
			this.getFourQuadrantList();
		},
		"tagitems": {
			handler() {
				var temp = [];
				var len = this.tagitems.length;
				for(var i = 0; i <= len - 1; i++) {
					var item = this.tagitems[i];
					temp.push({
						key: item.key,
						name: item.name
					});
				}
				this.getTagTmpList();
			},
			deep: true,
		},
		todayTags: {
			handler() {
				this.getTagTmpList();
			},
			deep: true,
		},
		"$route": function(to, from) {
			//路由发生变化时，更新标签模板的顺序，否则会出问题
			this.$store.commit({
				type: "z39/tagTmpResort"
			});
		},
		filterTaskState:function(){
			this.resort();
		}
	},
	created() {
		//this.daySelect =this.$store.state.z39.selectedDayDate;
		this.tagsRepeatList.forEach(item => {
			this.tagsRepeatDic[item.value] = item.name;
		})
	},
	filters: {

	},
	methods: {
		daterangeChange(currentDate) {

		},
		upTask(e) {
			this.curIndex = this.curIndex || +e.srcElement.dataset.index
			var objArr = this.todayArr
			var code = +e.keyCode
			console.log(code)
			if(code == 38) { // up
				if(this.curIndex === 0) {
					this.curIndex = objArr.length-1
				} else {
					this.curIndex = this.curIndex - 1
				}
				this.changeSelectedTask(objArr[this.curIndex])
				this.$refs.taskDetailComponent.showTaskDetail(objArr[this.curIndex].id)
			} else if(code == 40) {
				console.log('down')
				if(this.curIndex === objArr.length-1) {
					this.curIndex = 0
				} else {
					this.curIndex = this.curIndex + 1
				}
				this.changeSelectedTask(objArr[this.curIndex])
				this.$refs.taskDetailComponent.showTaskDetail(objArr[this.curIndex].id)
			} else if(code >= 48 && code <= 57) {
				console.log('select')
				console.log(this.tagTmpList)
				let tagTmpList = this.tagTmpList
				let arr = tagTmpList[0].list
				this.tagTmpList[0].list[code-48].checked = !arr[code-48].checked
				this.doTagSet(objArr[this.curIndex], arr[code-48].name);
			}

		},
		fastChoice(e) {
			console.log('e', e,keyCode)
		},
		loadPic:function (index,desc) {
		this.templateData = desc.title+desc.desc;
		},
		setSwitchhover:function(index, val){
			if(index != 0) return;
			this.switchhover = !!val;
		},
		getTagTmpList: function() {
			var tmpList = [];
			var _this = this;
			tmpList = this.todayTags.map(function(item) {
				var obj = Object.assign({}, item)
				obj.list = _this.getTagsProList(obj.tmp, obj)
				return obj;
			})
			this.tagTmpList = tmpList;
		},
		getTagsProList: function(item, parentItem) {
			let _this = this;
			var arr1 = item.split(',')
			var list = [];
			arr1.forEach(function(it) {
				if(it == '') {
					return;
				}
				var key = it.split('=')[0];
				var val = it.split('=')[1];
				var obj, people, iserror = false;
				if((key == "to") && val && parentItem.key == 'to') {
					people = _this.memberDic["uid_" + val];
					obj = {
						key: key,
						name: people ? people.name : '',
						value: people ? people.uid : '',
						checked: false,
					};
					//没找到人名时不显示
					if(obj.name) {
						list.push(obj)
					}

				} else if(key == 'repeat') {
					obj = {
						key: key,
						name: _this.tagsRepeatDic[val] || '',
						value: val,
						checked: false,
					};
					list.push(obj)
				} else if(key != "to" || parentItem.key != 'to') {
					obj = {
						key: key,
						name: _this.tagitemDic[key] || '',
						value: val,
						checked: false,
					};
					list.push(obj)
				}
			})
			return list;
		},
		updateList: function(index, taskObj) {
			this.todayArr.splice(index, 0, taskObj)
		},
		showDetail: function(taskId) {
      //由于会引起闪屏，所以关掉
			//$('.task-detail-container').focus()
			this.$refs.taskDetailComponent.showTaskDetail(taskId)
		},
		compareTimeDot: function(time) {
			if(time.indexOf(':') < 0) {
				return
			}
			var hours = time.split(':')[0]
			var minute = time.split(':')[1]
			var totalMimute = hours * 60 + minute;
			return totalMinute;
		},
		//模式1，3四象限、生活日志排序方法
		dragStart(){
			this.$parent.dragStart();
		},
		dragEnd(){
			this.$parent.dragEnd();
		},
		resortByGroup(event){
			this.dragEnd();

			let id = $(event.clone).attr("taskId");
			let key = $(event.to).attr('anotherKey1');
			//this.fourQuadrantList
			//fourQuadrantResort(item1.key,item1.list)

			let keys = ['critical', 'high', 'low', 'minor']; //life
			//移动后的列表
			let after = this.lifeItem['list'];
			this.fourQuadrantList.forEach(item=>{
				if(item['key'] == key){
					after = item['list']; return;
				}
			});

			if(after.length == 1) return;//1条数据不用排序
			//查找插入位置（之前或之后）
			let index = 0;
			after.forEach((item,i)=>{
				if (item['id'] == id){
					event['item'] = item;
					index = i;
					return ;
				}
			});

			let all_index = 0;
			this.todayArr.forEach((item,i)=>{
				if(item['id'] == id){all_index = i;return;}
			});
			this.todayArr.splice(all_index, 1);

			//之前加入
			if(index == 0){
				let before_key = after[1]['id'];
				let before_index = 0;
				this.todayArr.forEach((item,i)=>{
					if(item['id'] == before_key){before_index = i;return;}
				});

				this.todayArr.splice(before_index, 0, event['item']);
			}else{//之后加入
				let after_key = after[index-1]['id'];
				let after_index = 0;
				this.todayArr.forEach((item,i)=>{
					if(item['id'] == after_key){after_index = i;return;}
				});

				this.todayArr.splice(after_index+1,0, event['item']);
			}
			this.setTodayArrFilter();
			this.saveSort();

		},
		resort() {
			var _this = this;
			var uid = this.uid;
			var tempDay = this.daySelect;
			var temp = this.taskAll.filter((task) => {
				if(task.tags && task.tags["life"] !=undefined) return false ; //不显示生活任务,这里可能和生活任务的逻辑冲突.还需要完善.
				if(this.filterTaskState==''||this.filterTaskState==0){
					return task.parid == null && task.uid == uid && task.tags && task.tags["due"] && task.tags["due"].indexOf(tempDay) != -1
				}else if(this.filterTaskState==1){
					return task.parid == null && task.uid == uid && task.tags && task.tags["due"] && task.tags["due"].indexOf(tempDay) != -1&&task.state!='done'&&task.state!='cancelled'
				}else if(this.filterTaskState==2){
					console.log(task.state)
					return task.parid == null && task.uid == uid && task.tags && task.tags["due"] && task.tags["due"].indexOf(tempDay) != -1&&task.state=='done'
				}
			});
			this.taskAcount.all = temp.length;
			this.taskAcount.finish = 0;
			//做时间排序
			let sortdayDic = [];
			if(this.sortdayDic[this.daySelect]){
				let i =0;
				let sorts = this.sortdayDic[this.daySelect].split(',');
				if(sorts.length){
					sorts.forEach(item=>{
						sortdayDic[item] = (i++) - sorts.length;
					});
				}

			}
			temp.forEach(function(item, index, tmp) {
				//先查询是否已被排序
				if(sortdayDic[item.id]){
					item._sort = sortdayDic[item.id];
				}
				if(index == 0) {
					if(item.tags["due"]){
						item.timeDot = item.tags["due"].split(' ')[1] || '09:00'
						if(item.timeDot.split(':').length == 3) {
							item.timeDot = item.timeDot.split(':').splice(0, 2).join(':')
						}
					}else{
						item.timeDot = '09:00'
					}

				} else if(item.tags["due"]) {
					item.timeDot = item.tags.due.length>10?item.tags.due.split(' ')[1]:'???'
					if(item.timeDot.split(':').length == 3) {
						item.timeDot = item.timeDot.split(':').splice(0, 2).join(':')
					}
				} else if(!item.timeDot) {
					item.timeDot = '???'
				}
				if(item.state == 'done') {
					_this.taskAcount.finish++;
				}
			})
			//先排序再赋值
			temp = this.resortByTimeDot(temp)
			temp.forEach(function(item, index, tmp) {
				//如果上一个有need值，且下一个时间没有时刻，上个时间有时刻
				if(index < (tmp.length - 1) && item.tags && item.tags['need'] && item.timeDot != '???' && tmp[index + 1].tags["due"] && tmp[index + 1].tags["due"].split(' ')[1] == undefined) {

					var hour1 = item.timeDot.split(':')[0],
						minute1 = parseInt(item.timeDot.split(':')[1]);
					var hour2 = Math.ceil(item.tags.need/3600),
						minute2 = Math.ceil(item.tags.need%3600/60);
					var hour3 = Number(hour1) + Number(hour2) + parseInt((minute1 + minute2) / 60),
						minute3 = (minute1 + minute2) % 60;
					if(isNaN(hour3)){
						tmp[index + 1].timeDot = '???';
					}else{
						if(String(hour3).length == 1) hour3 = '' + 0 + hour3;
						if(String(minute3).length == 1) minute3 = '' + 0 + minute3;
						tmp[index + 1].timeDot = hour3 + ':' + minute3;
					}
				}
			})
			//temp=this.resortByTimeDot(temp)
			this.todayArr = temp;
			this.saveSort();
			//
			this.getFourQuadrantList();
            this.changePercent();
			this.todayArr = this.getSortTask(temp,this.daySelect) ;

			// this.todayArrFilter = this.getSortTask(temp,this.daySelect) ;
			this.setTodayArrFilter();
		},
        changePercent(){
            console.log("changePercent");
            var temp = this.todayArr ;
            var tempDone = temp.filter(task=> {return task.state == 'done'} );
            var doneNum = tempDone.length  ;
            var taskPercent = temp.length>0?Math.floor(100*doneNum/temp.length):0;
            var usedTotal = 0 ;
          	var needTotal = 0;
            var used ,usedStr ;
            temp.forEach(item=>{
            	if (item.tags && item.tags.need) needTotal += parseInt(item.tags.need);
                used = item.tags.used || item.tags.wasted || item.tags.usedCalc || 0 ;
                usedTotal += getSecond(used) ;
                // console.log("task id:",item.title,used);
            })
          	this.needTotal = formatUsed(needTotal);
            this.usedStr = formatUsed(usedTotal);
            // this.$message({message: `总耗时 ${usedStr}`,type: 'info'});
        },
        saveSort(reset = false){
			if(reset){
				this.dragEnd();
			}
			var ids = this.todayArr.map(task=>{return task.id});
			if(!ids.length)return ;
			//如果和原先排序不一致
			if((this.sortdayDic[this.daySelect] && ids.join(",") != this.sortdayDic[this.daySelect]) || !this.sortdayDic[this.daySelect]){
				this.sortdayDic[this.daySelect] = ids.join(",");
				this.sortdataAdd({ day:this.daySelect, sorts:ids.join(",") });
			}
			if(reset) this.resort();

        },
		setTimeDot: function() {
			var item = this.taskDic[this.selectedTaskId];
			if(!item.tags['due'].split(' ')[0]) {
				this.$message({
					message: '设置失败',
					type: 'error'
				});
				return;
			}
			if(!this.selectTimeDot) {
				this.$message({
					message: '请选择时间',
					type: 'error'
				});
				return;
			}
			var dueVal = item.tags['due'].split(' ')[0] + ' ' + this.selectTimeDot;
			var tagId = this.tagDic[item.id + '_due'].id;
			var sdata = {
				id: tagId,
				key: 'due',
				value: dueVal
			};
			this.tagSet(sdata, false, item)
			this.timeDotDialogVisible = false
		},
		resortByTimeDot: function(arr) {
			arr.sort(function(a, b) {
				var t1 = a._sort?a._sort+':00':(a.timeDot == '???' ? '240:00' : a.timeDot);
				var t2 = b._sort?b._sort+':00':(b.timeDot == '???' ? '240:00' : b.timeDot);
				t1 = parseInt(t1.split(':')[0]) * 60 + parseInt(t1.split(':')[1])
				t2 = parseInt(t2.split(':')[0]) * 60 + parseInt(t2.split(':')[1])
				return t1 - t2
			})
			return arr;
		},
		tagColumnDragEnd: function() {
			var tagArr = [];
			$('#tagTmpList>li').each(function() {
				tagArr.push($(this).attr('tagKey'))
			})
			localStorage.setItem('tagTmpSortArr', JSON.stringify(tagArr));
		},
		addColumn: function() {
			this.$prompt('请输入标签名', '添加列', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /.+/,
				inputErrorMessage: '标签名不能为空'
			}).then(({
				value
			}) => {
				var valueText = pinyin.pinyin.getCamelChars(value)+pinyin.pinyin.getFullChars(value);
				if(value.length>12){
					this.showNotice('标签长度不能不能超过12个字符', 'warning');
					return;
				}
				if(valueText.length>25){
					valueText=valueText.substring(0,25)
				}
				var hasKey=this.tagTmpList.some(item=>{
					return item.key==valueText
				})
				if(hasKey){
					this.showNotice('标签已存在', 'warning');
					return;
				}
//				this.addCardItemLoading = true;
				var params = {
					pid: null,
					count: null,
					type: 1,
					name: value,
					key: valueText,
					tmp: ''
				}
				var _this = this;
				api.tagTmpAdd(params).then(data => {
					if(data && data.errno == 0) {
						_this.addCardItemTitle = ''
						_this.$message({
							message: '保存成功',
							type: 'success'
						})
						params.id = data.data;
						params.type = "z39/addTagTmps";
						_this.$store.commit(params);
						var time1 = setTimeout(function() {
							clearTimeout(time1)
							_this.tagColumnDragEnd();
						}, 1000)

					} else { //发生错误.
						_this.$message({
							message: data.errmsg,
							type: 'error'
						});
					}
				})
			}).catch(() => {});
		},

		changeSelectedTask: function(item) {
			console.log('item', item)
			event.cancelBubble = true;
			event.stopPropagation();
			this.tagTmpList.forEach(function(item1) {
				item1.list.forEach(function(item2) {
					item2.checked = false;
				})
			})
			//开发和其他的key需要做判断，成员现在还没做
			for(var key1 in item.tags) {
				var isNormalKey = false;
				this.tagTmpList.forEach(function(item1) {
					if(item1.key == key1) {
						isNormalKey = true;
						item1.list.forEach(function(item2) {
							if(item2.value == item.tags[key1]) {
								item2.checked = true;
							}
						})
					}
				})
				if(!isNormalKey) {
					this.tagTmpList.forEach(function(item1) {
						if(item1.key == 'other' || item1.key == 'dev') {
							item1.list.forEach(function(item2) {
								if(item2.key == key1) {
									item2.checked = true;
								}
							})
						}
					})
				}
			}
			//显示对应的标签
			this.selectedTaskId = item.id;

		},
		//点击任务勾选标签
		changeTaskTag: function(key, value, checked, parentKey) {
			if(!checked) {
				var tag = this.tagDic[this.selectedTaskId + "_" + key];
				this.tagDel(tag, false, this.taskDic[this.selectedTaskId]);
				return;
			}

			if(this.selectedTaskId == '') {
				this.$message({
					message: '请先选中一条任务',
					type: 'warning'
				});
				this.tagTmpList.forEach(function(item) {
					item.list.forEach(function(item2) {
						item2.checked = false;
					})
				})
				return;
			}

			//开发和其他要判断
			this.tagTmpList.forEach(function(item) {
				if(item.key == parentKey) {
					if(parentKey == 'dev' || parentKey == 'area4') {
						item.list.forEach(function(item2) {
							item2.key == key ? (item2.checked = true) : (item2.checked = false);
						})
					} else if(!(parentKey == 'other' || parentKey == 'recent')) {
						item.list.forEach(function(item2) {
							item2.value == value ? (item2.checked = true) : (item2.checked = false);
						})
					}
				}
			})

			var taskItem = this.taskDic[this.selectedTaskId];
			if(key=="need" && value.indexOf(":")!=-1) value = value.split(":")[0]*3600+value.split(":")[1]*60;
			this.doTagSet(taskItem, key, value, false)
		},
		setTodayArrFilter:function(){
			let  filterList = [];

			let finish = 0;
			this.todayArr.forEach(item => {
				let check = this.lifeItem['list'] && this.lifeItem['list'].some(item1=>{
					return item == item1;
				});
				if (!check) {
					filterList.push(item);
					item.state == 'done' && finish++;
				}
			});

			this.taskAcount.all = filterList.length;
			this.taskAcount.finish = finish;

			this.todayArrFilter = filterList;
		},
		setlifeItem: function(filter){
			let lifeItem = {key: 'life',
				value: '生活任务',
				list: [],
				finishedNum: 0,
				allNum: 0};

			let filterList = [];
			filter.forEach(item=>{
				filterList = filterList.concat(item['list']);
			});
			this.todayArr.forEach(function(item) {
				let check = filterList.some(item1=>{
					return item == item1;
				});
				if (!check && item.tags.life != undefined) {
					lifeItem.list.push(item);
					lifeItem.allNum++;
					item.state == 'done' && lifeItem.finishedNum++;
				}
			});

			this.lifeItem  = lifeItem;
			this.setTodayArrFilter();


		},
		//今日的三种展示方式
		getFourQuadrantList: function() {
			var list = [{
				key: 'critical',
				value: '1.紧急重要(立刻办)',
				list: [],
				finishedNum: 0,
				allNum: 0,
				needLeft:0
			}, {
				key: 'high',
				value: '2.重要不紧急(持续做)',
				list: [],
				finishedNum: 0,
				allNum: 0,
				needLeft:0
			}, {
				key: 'low',
				value: '3.紧急不重要(交给他人)',
				list: [],
				finishedNum: 0,
				allNum: 0,
				needLeft:0
			}, {
				key: 'minor',
				value: '4.不紧急不重要(尽量不要做)',
				list: [],
				finishedNum: 0,
				allNum: 0,
				needLeft:0
			}];

			this.todayArr.forEach(function(item) {
				var listTarget ;
				if(item.tags.critical != undefined) {
					listTarget = list[0] ;
				} else if(item.tags.low != undefined) {
					listTarget = list[2] ;
				} else if(item.tags.minor != undefined){
					listTarget = list[3] ;
				} else{ // if(item.tags.high != undefined)  缺少标签的任务显示到重要任务中
					listTarget = list[1] ;
				}
				listTarget.list.push(item);
				listTarget.allNum++;
				item.state == 'done' && listTarget.finishedNum++;
				if((item.state == '' || item.state == 'due' || item.state == 'toggle') && item.tags && item.tags.need) listTarget.needLeft += parseInt(item.tags.need); 
			})
			list.map(item=>{
				item.needLeft = formatUsed(item.needLeft);
			})
			if(this.lifevisible){
				this.setlifeItem(list);
			}
			this.fourQuadrantList = list;
		},
		addTaskWithQuadrant: function(addTag) {
			var obj = {
				'due': this.daySelect
			};
			obj[addTag] = ''
			this.addTaskWithDue(obj)
		},
		changeTodayShowType: function(type) {
			localStorage.setItem('todayModelType',type)
			this.todayShowType = type;
		},
		updateTagTmp: function(tagTmp, delKey, delValue) {
			event.stopPropagation();
			event.cancelBubble = true;
			var params = {
				id: tagTmp.id,
				pid: null,
				count: null,
				type: 1,
				name: tagTmp.name,
				key: tagTmp.key,
			}
			var tagTmpArr = tagTmp.tmp ? tagTmp.tmp.split(',') : [];
			var index1 = tagTmpArr.indexOf(delKey);
			var index2 = tagTmpArr.indexOf(tagTmp.key + '=' + delValue)
			if(index1 > -1) {
				tagTmpArr.splice(index1, 1)
			}
			if(index2 > -1) {
				tagTmpArr.splice(index2, 1)
			}
			params.tmp = tagTmpArr.join(',')
			if(tagTmp.init == 1) {
				return api.tagTmpAdd(params).then(data => {
					if(data.errno != 0) {
						this.showNotice(data.errmsg, 'warning', true);
						return Promise.reject(data.errmsg);
					}
					this.$store.commit({
						type: "z39/updateTagTmps",
						id: data.data,
						tmp: params.tmp,
						key: tagTmp.key
					});
					return Promise.resolve(data.data);
				})
			} else {
				return api.tagTmpPut(params).then(data => {
					this.addCardItemLoading = false;
					if(data.errno != 0) {
						this.showNotice(data.errmsg, 'warning', true);
						return Promise.reject(data.errmsg);
					}
					this.$store.commit({
						type: "z39/updateTagTmps",
						id: params.id,
						tmp: params.tmp,
						key: tagTmp.key
					});
					return Promise.resolve(data.data);
				})
			}
		},
		delTagTmp: function(tagTmp) {
			this.$confirm('是否确认删除选中标签？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				console.log(tagTmp)
				api.tagTmpDel({
					id: tagTmp.id
				}).then(data => {
					if(data.errno != 0) {
						this.showNotice(data.errmsg, 'warning', true);
						return Promise.reject(data.errmsg);
					}
					this.showNotice('删除成功', 'success', true);
					this.$store.commit({
						type: "z39/deleteTagTmp",
						id: tagTmp.id,
					});
					return Promise.resolve(data.data);
				})
			}).catch(() => {

			});

		},
    trueActive: function (e) {
      e.target.getElementsByClassName('receive-btn')[0].style.display='block'
      e.target.getElementsByClassName('receive-btn')[0].style.right='0'
    },
    falseActive: function (e) {
      e.target.getElementsByClassName('receive-btn')[0].style.display='none'
      e.target.getElementsByClassName('receive-btn')[0].style.right='-75px'
	}
	},
	mounted() {
		initPage();
		this.resort();
		this.getTagTmpList();
		this.getFourQuadrantList();
		bus.$on("tagUpdate",()=>{
			console.log("bus tagUpdate")
			this.changePercent();
		});
		bus.$on('toShowTaskDetail', id => {
			console.log("sdfsd")
			this.showDetail(id)
		})
		this.initEditor();
	}
}</script>
<style scoped="scoped">#tagTmpList .kanban-card-warp .card-table .head-tr .header .attr {
	max-width: 110px;
}

.task-main-container .kanban-main-container .kanbanCard-main-container {
	left: -20px;
	padding-left: 20px;
	width: calc(100% + 20px);
}

.task-main-container .kanban-main-container .kanbanCard-main-container .time-dot {
	position: absolute;
	left: -32px;
	top: 0;
	cursor: pointer;
	background: url(../../../static/z39pc/assets/images/timedot1.png) no-repeat center center;
	background-size: 100% 100%;
	color: #fff;
	padding-right: 10px;
	padding-left: 3px;
	width: 44px;
	text-align: center;
}

.task-main-container .kanban-main-container .kanbanCard-main-container .time-dot.orange {
	background: url(../../../static/z39pc/assets/images/timedot2.png) no-repeat center center;
	background-size: 100% 100%;
}

.task-main-container .kanban-card-container.list-today .kanban-card-warp .card-table .body-tr .body-tr-container .kanban-item-warp {
	left: -20px;
}

.task-main-container .kanban-card-container.list-today .dragArea.today-task-list {
	padding-left: 30px;
}

.task-main-container .second-type-container .kanban-card-container.list-today .dragArea.today-task-list,
.task-main-container .third-type-container .kanban-card-container.list-today .dragArea.today-task-list {
	padding-left: 7px;
	margin-left: 24px;
}
.task-main-container .kanban-card-container .kanban-card-warp .footer .footerRight{
	text-align: right;
    padding-right: 10px;
}

@media screen and (max-height: 1280px){
  #taskeditor {
    display: none;
    width: calc(100% - 380px) !important;
    margin-right: 5px;
	height: 104% !important;
  }
}
 @media screen and (max-height: 800px){
    #taskeditor{
      display: none;
      height: 108% !important;
      margin-top: -22px;
      width: calc(100% - 310px) !important;
      margin-right: 1px;
    }
  }

li:focus {
	outline: none;
}


.task-main-container li .critical {
  border: 1px solid #1ba4ff;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #1ba4ff inset*/
}
.task-main-container li .high {
  border: 1px solid #72c7ff;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #72c7ff inset*/
}
.task-main-container li .low {
  border: 1px solid #f7c3c3;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #FF6666 inset*/
}
.task-main-container li .minor {
  border: 1px solid red;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px red inset*/
}
.task-main-container li .life {
  border: 1px solid orange;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px orange inset*/
}
</style>
